<template>
  <div>
    <Header>
      <van-icon name="arrow-left" size="22" slot="left" />
      <van-icon name="wap-home-o" size="22" slot="right" />
      <span slot="center">我的订单</span>
    </Header>
    <van-tabs v-model="active">
      <van-tab title="全部">
        <AllOrdersItem :goods="goodsData" v-if="goodsData"></AllOrdersItem>
      </van-tab>
      <van-tab title="待付款">
        <AllOrdersItem :goods="unpaid" v-if="goodsData"></AllOrdersItem>
      </van-tab>
      <van-tab title="代发货">代发货</van-tab>
      <van-tab title="待收货">待收货</van-tab>
      <van-tab title="待评价">待评价</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { getAllOrders } from '@/network/api/orders'
import AllOrdersItem from './AllOrdersItem.vue'
import Scroll from '@/components/common/Scroll.vue'
export default {
  name: 'allorders',
  components: {
    Header,
    AllOrdersItem,
    Scroll
  },
  data() {
    return {
      active: 0,
      goodsData: []
    }
  },
  methods: {
    parseData(goodsData) {
      goodsData.forEach(item => {
        item.goodsIds = item.goodsIds.split(',')
        item.titles = item.titles.split(',')
        item.prices = item.prices.split(',')
        item.counts = item.counts.split(',')
        item.imgUrls = item.imgUrls.split('*')
      })
      return goodsData
    }
  },
  computed: {
    unpaid() {
      return this.goodsData.filter(item => item.state === '未支付' || item.state === '待支付')
    }
  },
  async created() {
    this.active = this.$route.query.index
    const res = await getAllOrders(this.$store.state.user.userId)
    this.goodsData = this.parseData(res.data)
    this.goodsData = this.goodsData.reverse()
  },
}
</script>

<style scoped lang="less">

</style>

